<template>
	<div class="container">
		<div class="header">
			<div class="header-white">
				<image :src="tipImg" mode="widthFix" class="header-img"></image>
				<div class="no-answer" v-if="!ac">
					<div class="t1">您还未做过问卷</div>
					<div class="t2" @click="jumpWenquan">请前往</div>
					<div class="t3">完成问卷后查看问卷分析报告</div>
				</div>

				<div class="answer" v-else>
					<div class="t1" v-if="ac.ASCRIBE_NAME">{{ ac.ASCRIBE_NAME}}</div>

					<div class="t4" v-if="ac.ASCRIBE_NAME" @click="jumpGY">查看问卷报告<u-icon name="arrow-right"
							color="#6DD400" size="12"></u-icon></div>
					<div class="t2" @click="jumpWenquan" v-if="questionnaire">再测一测</div>
				</div>
			</div>
		</div>
		<div class="recomend-card">
			<div class="title">根据您的发质问题推荐商品</div>
			<div class="desc" v-if="!product_list.length">
				完成问卷后，将根据您的发质问题推荐商品
			</div>
		</div>
		<div class="card" v-for="(item, index) in product_list" :key="index">
			<product-item :item="item"></product-item>
		</div>

		<view v-if="!isLogin" class="login-mask">
			<get-phone />
		</view>
	</div>
</template>

<script>
	import {
		getCurrentPageConfigByName,
		getImg
	} from '../utils/index.js'
	import {
		wx_questionnaire_list,
		wx_questionnaire_answered_list
	} from '@/api'
	import {
		mapState
	} from 'vuex'
	import shareMixin from '../mixins/shareMixin.js'
	export default {
		data() {
			return {
				tipImg: '',
				ac: null,
				questionnaire: null,
				product_list: [],
			}
		},
		computed: {
			...mapState(['isLogin'])
		},
		components: {

		},
		mixins: [shareMixin],
		onShow() {
			this.ac = null
			this.questionnaire = null
			getCurrentPageConfigByName('顶部图片').then(res => {
				if (res) {
					this.tipImg = getImg(res.bg_image)
				}
			})
			wx_questionnaire_list({
				type: 10
			}).then(res => {
				if (res.questionnaires && res.questionnaires.length) {
					this.questionnaire = res.questionnaires[0]
				}
			})
			wx_questionnaire_answered_list().then(res => {
				if (res.account_list && res.account_list.length) {
					this.ac = res.account_list[0]
					if (res.account_list[0].product_list) {
						res.account_list[0].product_list.forEach(item => {
							if (item.IMAGE) {
								item.IMAGE = getImg(item.IMAGE)
							}
						})
						this.product_list = res.account_list[0].product_list
					}
				}
			})
			getCurrentPageConfigByName('问卷跳转').then(res => {
				console.log('tiaozhua', )
				if (res.url) {
					this.jumpUrl = res.url
				}
			})
		},
		methods: {
			jumpWenquan() {
				wx.navigateTo({
					url: this.jumpUrl
				})
			},
			jumpGY() {
				if (this.ac) {
					wx.navigateTo({
						url: "/pages_index/causeAnalysis/index?result_id=" + this.ac.RESULT_ID
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.card {
		overflow: hidden;

		&:not(:nth-of-type(1)) {
			border: 20rpx;
		}

		&:nth-of-type(1) {
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
		}
	}

	.desc {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.5);
		line-height: 34rpx;
		font-style: normal;
		min-height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title {
		height: 96rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
		border-bottom: 2rpx solid #E6E6E6;
		line-height: 96rpx;
	}

	.container {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		position: relative;
	}

	.recomend-card {
		// min-height: 404rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 20rpx 20rpx 0 0;
		margin: 20rpx 20rpx 0;
		box-sizing: border-box;
		padding: 20rpx 20rpx 0;
	}

	.header {
		width: 100%;
		// height: 532rpx;
		height: 462rpx;
		background: linear-gradient(180deg, #38FFDA 0%, #F7F7F7 100%);
		position: relative;
		overflow: hidden;

		&-white {
			box-sizing: border-box;
			height: 274rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			position: absolute;
			bottom: 0;
			left: 20rpx;
			width: calc(100% - 40rpx);
		}

		&-img {
			width: 304rpx;
			position: absolute;
			bottom: 0;
			left: 26rpx;
		}
	}

	.no-answer {
		position: absolute;
		top: 32rpx;
		right: 58rpx;
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		max-width: 308rpx;

		.t1 {
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
			line-height: 40rpx;
			text-align: right;
			font-style: normal;
		}

		.t2 {
			// width: 128rpx;
			height: 44rpx;
			background: #FFF36D;
			border-radius: 22rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			line-height: 34rpx;
			text-align: right;
			font-style: normal;
			margin-top: 42rpx;
			margin-bottom: 44rpx;
			padding-left: 28rpx;
			padding-right: 28rpx;
		}

		.t3 {
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
			line-height: 34rpx;
			text-align: right;
			font-style: normal;
		}

		.t4 {
			margin-top: 28rpx;
			margin-bottom: 32rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #6DD400;
			line-height: 34rpx;
			text-align: right;
			font-style: normal;
		}
	}

	.answer {
		position: absolute;
		top: 32rpx;
		right: 58rpx;
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		max-width: 308rpx;

		.t1 {
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
			line-height: 40rpx;
			text-align: right;
			font-style: normal;
		}

		.t2 {
			// width: 128rpx;
			height: 44rpx;
			background: #FFF36D;
			border-radius: 22rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			line-height: 34rpx;
			text-align: right;
			font-style: normal;
			// margin-top: 42rpx;
			// margin-bottom: 44rpx;
			padding-left: 28rpx;
			padding-right: 28rpx;
		}

		.t3 {
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
			line-height: 34rpx;
			text-align: right;
			font-style: normal;
		}

		.t4 {
			margin-top: 28rpx;
			margin-bottom: 32rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #6DD400;
			line-height: 34rpx;
			text-align: right;
			font-style: normal;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>